<template>
  <div>
    <Navbar :user-img="model.user_img"></Navbar>
    <main>
      <div class="uploadFile">
        <van-uploader :after-read="afterReadImg" class="uploadImg" preview-size="100vw"></van-uploader>
        <EditBanner left="头像">
          <img v-if="model.user_img" slot="right" :src="model.user_img" alt="用户头像">
          <img v-else slot="right" alt="用户头像" src="../assets/default_img.jpg">
        </EditBanner>
      </div>
      <EditBanner left="昵称" @handleClick="name_show=true">
        <span slot="right">{{ model.name }}</span>
      </EditBanner>
      <EditBanner left="UID">
        <span slot="right">{{ model.id }}</span>
      </EditBanner>
      <EditBanner left="性别" @handleClick="gender_show=true">
        <span slot="right">{{ model.gender == 1 ? '男' : '女' }}</span>
      </EditBanner>
      <EditBanner left="账号" @handleClick="account_show=true">
        <span slot="right">{{ model.username }}</span>
      </EditBanner>
      <EditBanner left="个性签名" @handleClick="signature_show=true">
        <span slot="right">{{ model.user_desc }}</span>
      </EditBanner>
      <van-dialog v-model="name_show" show-cancel-button title="昵称" @cancel="text=''" @confirm="updateName">
        <van-field v-model="text" autofocus/>
      </van-dialog>
      <van-action-sheet v-model="gender_show" :actions="actions" cancel-text="取消" @select="onSelect"/>
      <van-dialog v-model="account_show" show-cancel-button title="账号" @cancel="text=''" @confirm="updateAccount">
        <van-field v-model="text" autofocus/>
      </van-dialog>
      <van-dialog v-model="signature_show" show-cancel-button title="个性签名" @cancel="text=''" @confirm="updateSignature">
        <van-field v-model="text" autofocus/>
      </van-dialog>
    </main>
    <van-button hairline plain style="width: 100%; color: #999999; font-size: 4.5vw;"
                @click="$router.push('/userinfo')">返回个人中心页
    </van-button>
  </div>
</template>

<script>
import Navbar from '@/components/common/Navbar'
import EditBanner from '@/components/common/EditBanner'

export default {
  name: 'Edit',
  components: {Navbar, EditBanner},
  data() {
    return {
      model: {},
      name_show: false,
      gender_show: false,
      actions: [{name: '男', value: 1}, {name: '女', value: 0}],
      account_show: false,
      signature_show: false,
      text: ''
    }
  },
  methods: {
    async getUserData() {
      const res = await this.$http.get('/user/' + localStorage.getItem('id'))
      this.model = res.data[0]
    },
    async afterReadImg(filename) {
      const formData = new FormData()
      formData.append('file', filename.file)
      const res = await this.$http.post('/upload', formData)
      this.model.user_img = res.data.url
      await this.updateUser()
    },
    async updateUser() {
      const res = await this.$http.post('/update/' + localStorage.getItem('id'), this.model)
      console.log(res)
    },
    updateName() {
      this.model.name = this.text
      this.updateUser()
      this.text = ''
    },
    onSelect(data) {
      this.model.gender = data.value
      this.updateUser()
      this.gender_show = false
    },
    updateAccount() {
      this.model.username = this.text
      this.updateUser()
      this.text = ''
    },
    updateSignature() {
      this.model.user_desc = this.text
      this.updateUser()
      this.text = ''
    },
  },
  created() {
    this.getUserData()
  }
}
</script>

<style lang="less" scoped>
main {
  margin: 4vw 0;
}

main img {
  width: 12.27vw;
  height: 12.27vw;
}

.uploadFile {
  position: relative;
  overflow: hidden;

  .uploadImg {
    opacity: 0;
    position: absolute;
  }
}
</style>
